<template>
  <el-dialog :visible.sync="show" width="70%" top="10px">
    <div style="display: flex">
      <div class="left">
        <el-image :src="'https://'+info.imgUrl" alt="" style="width: 500px"></el-image>
      </div>
      <div class="right" style="margin-left: 50px;width: 65%;max-height:calc( 100vh - 150px);">
        <span>选择模板：</span>
        <el-select v-model="templateId" style="width: 500px" placeholder="请选择模板" size="small" @change="changeTemplate">
          <el-option v-for="item in templateList" :value="item.templateId" :label="item.templateName"
                     :key="item.templateId"></el-option>
        </el-select>
        <el-table :data="problemList" @selection-change="handleSelectionChange"
                  @select="changeSelect"
                  :cell-style="{ 'textAlign': 'center'}"
                  :header-cell-style="{'color': '#999', 'textAlign': 'center' }"
                  style="margin-top: 10px;height: 300px;overflow-y: auto;"
        >
          <el-table-column
              type="selection"
              width="55">
          </el-table-column>
          <el-table-column prop="problemName" label="问题项"></el-table-column>
          <el-table-column prop="recordScore" label="分值"></el-table-column>
          <el-table-column label="操作">
            <template v-slot:default="scope">
              <el-radio-group v-model="scope.row.isQualified" @change="val => handleRadioChange(val, scope.row)">
                <el-radio :label="1" text-color="#999" fill="#999" :autofocus="false">合格</el-radio>
                <el-radio :label="2" :autofocus="false">不合格</el-radio>
              </el-radio-group>
            </template>
          </el-table-column>
        </el-table>
        <p style="margin-top: 10px">总分：<span style="margin-left: 10px;color: #ff6a00">{{ totalCount }}</span>
        </p>
        <p style="margin-top: 10px">得分：<span style="margin-left: 10px;color: #ff6a00">{{ getCount }}</span>
        </p>
        <span>
          点检意见：<el-input size="small" style="width: 300px" v-model="spotCheckRemark"></el-input>
        </span>
      </div>
    </div>
    <span slot="footer">
      <el-button @click="_submit" size="small" style="background-color:#303e9d;color: #eeeeee">提 交</el-button>
      <el-button @click="show=false" size="small">取 消</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  name: "pictruePatorlDraw",
  data() {
    return {
      show: false,
      info: {},
      templateId: "",
      selectInfo: "",
      spotCheckRemark: "",
      templateList: [],
      problemList: [],
      totalCount: 0,
      getCount: 0,
    }
  },
  methods: {
    handleOpen(val) {
      this.info = val
      this.spotCheckRemark = ''
      this.show = true
      this.getTemplateData()
    },
    getTemplateData() {
      const data = {
        pageNumber: 1,
        pageSize: 10000,
        state: 1
      }
      this.$api.patrolGetPatrolTemplateVo(data).then(res => {
        this.templateList = res.data
        if (this.templateList.length > 0) {
          this.templateId = this.templateList[0].templateId;
          this.getLargeInfo(this.templateId)
        }
      })
    },
    getLargeInfo(id) {
      this.$api.patrolGetPatrolTemplateConfig({templateId: id}).then(res => {
        const submitList = [];
        this.menuList = res.largeVoList
        this.menuList.forEach(a => {
          a.termVoList?.forEach(b => {
            // totalCount += b.list?.length || 0;
            b.list?.forEach(c => {
              submitList.push({
                largeId: a.largeId,
                termId: b.termId,
                problemId: c.problemId,
                problemName: c.problemName,
                problemRemark: c.remark || "",
                isQualified: c.hege,
                recordScore: c.problemScore
              });
            });
          });
        });
        this.problemList = submitList
      })
    },
    changeTemplate(val) {
      this.templateId = val
      this.getLargeInfo(val)
    },
    handleSelectionChange(row) {
      this.selectInfo = row
      row.map(b => {
        this.totalCount = row.reduce((sum, b) => sum + (b.recordScore || 0), 0);
      })
    },
    handleRadioChange(val, row) {
      if (!row.mark) {
        this.$message.warning('请先选择问题项');
        this.$set(row, 'isQualified', null);
        return;
      }

      this.$set(row, 'isQualified', val);

      // 重新计算得分
      let score = 0;
      this.problemList.forEach(item => {
        if (item.mark && item.isQualified === 1) {
          score += Number(item.recordScore || 0);
        }
      });

      this.getCount = score; // 得分
    },
    _submit() {
      this.problemList = this.problemList.filter(item => item.mark == 1)
      const data = {
        list: this.problemList,
        patrolTemplateId: this.templateId,
        assignTaskId: this.info.assignTaskId,
        fullScore: this.totalCount,
        patrolScore: this.getCount,
        patrolType: 3,
        spotCheckRemark: this.spotCheckRemark,
        spotCheckImg: this.info.imgUrl
      }
      if (!data.spotCheckRemark) return this.$message('请填写点检意见！')
      this.$api.patrolAddPatrolRecord(data).then(res => {
        if (res == 1) {
          this.$message.success('添加考评成功！')
          this.show = false
        }
      })
    },
    changeSelect(selection, row) {
      this.$set(row, 'mark', 1); // 或设置成旧值
    }
  }
}
</script>

<style scoped lang="less">
/deep/ .el-table .el-table__cell {
  height: 30px;
  line-height: 30px; /* 让内容垂直居中 */
  padding: 0; /* 可选：去除额外内边距 */
}
</style>